<template>
	<view class="notice-details">
		<view class="notice-content">
			<view class="info">
				<view class="notice-name-state">
					<view class="name-time">
						<text>{{noticeDetails.userName}}</text>
						<text class="line"></text>
						<text class="time">{{handleTime(noticeDetails.addTime)}}</text>
					</view>
				</view>
				<view class="content">
					{{noticeDetails.notice}}
				</view>
			</view>
			<view class="read-number" @click="goViewDetails()">
				{{checkNum}}人已读
			</view>
		</view>
	</view>	
</template>
<script>
export default {
	data() {
		return {
			noticeDetails: {},
			noticeLogId: '',
			checkNum: 0
		}
	},
	onLoad(options) {
		this.noticeDetails = uni.getStorageSync('notice_details')
		this.noticeLogId = options.logid
		this.getOverGradeNotice()
	},
	methods: {
		getOverGradeNotice(){
			this.api.get('chatGroupManage/lookOverGradeNotice', {
				noticeLogId: this.noticeLogId
			}).then(res=>{
				if(res.data.state != 'ok') return
				let data = res.data || {}
				this.checkNum = data.checkNum;
			})
		},
		goViewDetails(){
			uni.navigateTo({
				url: '/pages/message/view-details?logid='+this.noticeLogId
			})
		},
		handleTime(date){
			let t = new Date(date.split('-').join('/')).getTime()
			let str = this.utils.handleTs(t, 'his')
			str = str.split('-').join('/')
			return str
		},
	}
}
</script>
<style lang="less" scoped>
	.notice-details{
		position: relative;
		min-height: 100vh;
		// #ifdef H5
		min-height: calc(100vh - 44px);
		// #endif
		background-color: #F9F9F9;
		&::after{
			position: absolute;
			left: 0;
			top: 0;
			content: '';
			width: 200%;
			height: 2rpx;
			background-color: #E5E5E5;
			transform: scale(0.5) translateX(-50%);
		}
	}
	.notice-content{
		background-color: #fff;
	}
	.info{
		padding: 32rpx 0;
		margin: 0 36rpx;
		
		position: relative;
		&::after{
			position: absolute;
			left: 0;
			bottom: 0;
			content: '';
			width: 200%;
			height: 2rpx;
			background-color: #EEEEEE;
			transform: scale(0.5) translateX(-50%);
		}
	}
	.notice-name-state{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
	}
	
	.name-time{
		font-size: 26rpx;
		color: #999999;
		display: flex;
		align-items: center;
	}
	.line{
		margin: 0 16rpx;
		display: inline-block;
		height: 24rpx;
		width: 2rpx;
		background-color: #CCCCCC;
	}
	.state{
		font-size: 24rpx;
	}
	.content{
		line-height: 42rpx;
		font-size: 30rpx;
		color: #333333;
	}
	.read-number{
		padding: 24rpx 0 32rpx;
		text-align: center;
		color: #28C2CD;
		font-size: 28rpx;
	}
</style>